<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>注册</title>
    <link rel="stylesheet" href="/static/bootstrap/css/bootstrap.min.css">
    <link rel="stylesheet" href="/static/my_css.css">
</head>
<body>
<div class="container">
    <div class="form-horizontal my_reg">
        <div class="row">
            <div class="col-md-6 col-md-offset-3">
                <div class="panel panel-primary">
                    <div class="panel-heading">注册</div>
                    <div class="panel-body">
                        <div class="form-group">
                            <label for="{{ form_obj.username.id_for_label }}"
                                   class="col-sm-2 control-label">{{ form_obj.username.label }}</label>
                            <div class="col-sm-10">
                                {{ form_obj.username }}
                                <span class="help-block">{{ form_obj.username.error_messages.0 }}</span>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="{{ form_obj.password.id_for_label }}"
                                   class="col-sm-2 control-label">{{ form_obj.password.label }}</label>
                            <div class="col-sm-10">
                                {{ form_obj.password }}
                                <span class="help-block">{{ form_obj.password.error_messages.0 }}</span>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="{{ form_obj.re_password.id_for_label }}"
                                   class="col-sm-2 control-label">{{ form_obj.re_password.label }}</label>
                            <div class="col-sm-10">
                                {{ form_obj.re_password }}
                                <span class="help-block">{{ form_obj.re_password.error_messages.0 }}</span>
                            </div>
                        </div>

                        <div class="form-group">
                            <label for="{{ form_obj.email.id_for_label }}"
                                   class="col-sm-2 control-label">{{ form_obj.email.label }}</label>
                            <div class="col-sm-10">
                                {{ form_obj.email }}
                                <span class="help-block">{{ form_obj.email.error_messages.0 }}</span>
                            </div>
                        </div>
                    </div>

                    <div class="form-group">
                        <label for="" class="col-sm-2 control-label">头像</label>
                        <div class="col-sm-8">
                            <label for="id_avatar"><img id="avatar-img" src="/static/img/default.png" alt=""></label>
                            <input type="file" id="id_avatar" accept="image/*" name="avatar" style="display: none">
                            <span class="help-block"></span>
                        </div>
                    </div>


                    <div class="form-group">
                        <div class="col-sm-offset-2 col-sm-10">
                            <button id="reg-submit" type="submit" class="btn btn-primary">注册</button>
                        </div>
                    </div>
                </div>
            </div>
        </div>


    </div>
</div>

<!--<script src="/static/bootstrap/js/bootstrap.min.js"></script>-->
<script src="/static/jquery-3.3.1.js"></script>
<script src="/static/setupajax.js"></script>
<script src="/static/bootstrap/js/bootstrap.min.js"></script>

<script>
//用户名校验
    $("#id_username").on("blur",function () {
        var username = $(this).val();
        $.ajax({
            url:"/check_username/",
            type:"post",
            data:{
                "username":username,
                "csrfmiddlewaretoken": $("[name='csrfmiddlewaretoken]").val()
            },
            success:function (data) {
                if(data.status){
                    $("#id_username").next("span").text(data.msg).parent().parent().addClass("has-error")
                }
            }
        })
    });
    //头像即时显示
    $("#id_avatar").on("change",function () {
        var fileReader = new FileReader();
        fileReader.readAsDataURL(this.files[0]);
        //  等上一步读完文件之后才 把图片加载到img标签中
        fileReader.onload=function(){
            $("#avatar-img").attr("src",fileReader.result)
        }
    });
    //ajax发送注册信息
    $("#reg-submit").on("click",function () {
        var formData = new FormData();
        formData.append("username",$("#id_username").val());
        formData.append("password",$("#id_password").val());
        formData.append("re_password",$("#id_re_password").val());
        formData.append("email",$("#id_email").val());
        formData.append("avatar",$("#id_avatar")[0].files[0]);
        formData.append("csrfmiddlewaretoken",$("[name=csrfmiddlewaretoken]").val());
        $.ajax({
            url: "/register/",
            type: "post",
            processData: false,  // 告诉jQuery不要处理我的数据
            contentType: false,  // 告诉jQuery不要设置content类型
            data: formData,
            success:function (data) {
               if(data.status){
                   console.log(data.msg);
                    $.each(data.msg,function (k,v) {
                        $("#id_"+k).next("span").text(v).parent().parent().addClass("has-error")
                    })
               }
               else{
                   alert("注册成功，返回登陆页面");
                   //console.log(data.msg);
                   location.href=data.msg;
               }
            }
        })
    })
    //点击相应的输入框的时候去除警告信息
    $("input").on("click",function () {
        $(this).next("span").text("").parent().parent().removeClass("has-error")
    })
</script>
</body>
</html>